<template>
  <van-popup v-model="showLargessPanel" class="largess-panel" position="right" :overlay="false">
    <van-nav-bar title="转赠给朋友" left-arrow @click-left="closeLargessPanel" right-text="转赠记录" left-text="返回" @click-right="openLargessRecordPanel">
    </van-nav-bar>
    <!-- 转赠记录面板 -->
    <largess-record-panel :showLargessRecordPanel="showLargessRecordPanel" @closeLargessRecordPanel="closeLargessRecordPanel"></largess-record-panel>
  </van-popup>
</template>

<script>
export default {
  props:['showLargessPanel'],
  data() {
    return {
      showLargessRecordPanel: false // 是否显示转赠记录
    }
  },
  methods: {
    closeLargessPanel () {
      this.$emit('closeLargessPanel');
    },
    // 打开转赠记录面板
    openLargessRecordPanel() {
      this.showLargessRecordPanel = true
    },
    // 关闭转赠记录面板
    closeLargessRecordPanel() {
      this.showLargessRecordPanel = false
    }
  }
}
</script>

<style lang="scss">
@import '../../assets/styles/common.scss';
.largess-panel{
   width: 100%;
   height: 100%;
   background-color: #f2f2f2;
}
</style>
